<template>
  <div class="home">
    <div class="flex-lr-cont">
      <div class="w50">
        <div class="control-nav">
          <v-btn rounded :idisabled="!jsonCode" class="ma-2" @click="startTask" color="primary">运行</v-btn>
          <v-btn rounded outlined class="ma-2" color="warning">清空</v-btn>
          <v-btn
            rounded
            :outlined="!showCode"
            class="ma-2"
            @click="showCode = !showCode"
            color="info"
          >代码</v-btn>
          <v-btn rounded v-if="showCode" outlined class="ma-2" color="primary">美化</v-btn>
        </div>
        <v-card flat class="json-form" v-if="!showCode" key="form" height="600px">
          <v-form>
            <v-text-field clearable name="domains" label="域名" :value="form.domains" hint="输入域名"></v-text-field>
            <v-text-field
              clearable
              name="startUrl"
              label="目标URL"
              :value="form.startUrl"
              hint="输入目标URL"
            ></v-text-field>
            <v-textarea
              clearable
              rows="3"
              name="urlTpl"
              label="资源URL模版"
              :value="form.urlTpl"
              hint="输入资源URL模版"
            ></v-textarea>
            <v-text-field
              clearable
              name="listXpath"
              label="列表Xpath"
              :value="form.listXpath"
              hint="输入列表Xpath"
            ></v-text-field>
            <template v-for="(v, i) in form.itemsXpath">
              <v-text-field
                clearable
                :key="v.id"
                name="itemXpath"
                :label="'子项Xpath-#' + i"
                :value="v.item"
                hint="输入子项Xpath"
                :append-outer-icon="
                  i === form.itemsXpath.length - 1 ? 'mdi-plus' : 'mdi-minus'
                "
                @click:append-outer="addItemXpath(i)"
              ></v-text-field>
            </template>
          </v-form>
        </v-card>
        <v-card flat v-else key="code" height="600px">
          <json-edit v-model="jsonCode" label="输入规则（JSON代码）"></json-edit>
        </v-card>
      </div>
      <div class="w50 tabs-docker">
        <div class="control-nav right">
          <v-btn text rounded class="ma-2" color="info">刷新日志</v-btn>
          <v-btn text rounded class="ma-2" color="info">导出URL</v-btn>
          <v-btn text rounded class="ma-2" color="info">刷新文件列表</v-btn>
        </div>
        <v-card flat height="600px">
          <v-tabs slider-color="primary" fixed-tabs v-model="valueTab">
            <v-tabs-slider></v-tabs-slider>
            <v-tab>运行日志</v-tab>
            <v-tab>文件URL</v-tab>
            <v-tab>文件列表</v-tab>
            <v-tab-item>
              <div class="tab-cont">
                <div class="log-cont">[2020-05-05 09:12:30] loging</div>
              </div>
            </v-tab-item>
            <v-tab-item>
              <div class="tab-cont">
                <v-virtual-scroll class="url-cont" :items="urlList" :item-height="30" height="552">
                  <template v-slot="{ item, index }">
                    <v-divider v-if="index > 0"></v-divider>
                    <div class="url-item">
                      <a href="javascript:;">{{ item }}</a>
                    </div>
                  </template>
                </v-virtual-scroll>
              </div>
            </v-tab-item>
            <v-tab-item>
              <div class="tab-cont">[2020-05-05 09:12:30] loging</div>
            </v-tab-item>
          </v-tabs>
        </v-card>
      </div>
    </div>
    <div class="remarks">
      <v-card flat class="mx-auto">
        <v-card-title>使用说明</v-card-title>
        <v-card-text>待补充</v-card-text>
      </v-card>
    </div>
  </div>
</template>

<script>
import JsonEdit from "../components/JsonEdit";
let tmpID = 10000;
let wsTask = null;
let wsTaskID = 0;
export default {
  name: "Home",
  data() {
    return {
      valueTab: 0,
      showCode: false,
      urlList: [
        "http://mp32a.ting89.com:9090/科幻有声/吞噬星空_华风神韵/{0}.mp3",
        "http://mp32a.ting89.com:9090/科幻有声/吞噬星空_华风神韵/{0}.mp3",
      ],
      form: {
        domains: "",
        startUrl: "",
        listXpath: "",
        itemsXpath: [
          {
            item: "",
            id: tmpID,
          },
        ],
        urlTpl: "",
      },
      jsonCode: "",
    };
  },
  watchs: {
    valueTab(v) {
      console.log(v);
    },
  },
  components: {
    JsonEdit,
  },
  mounted() {
    const host = window.location.host;
    wsTask = new WebSocket(`ws://${host}/api/jobs/ws_task`);
    wsTask.onmessage = (event) => {
      this.onWsTask(event);
    };
    wsTask.onclose = () => {
      wsTask = new WebSocket(`ws://${host}/api/jobs/ws_task`)
    };
  },
  methods: {
    onWsTask(event) {
      const data = JSON.parse(event.data);
      console.log(data);
      const type = data.type;
      if (type === "connect") {
        this.wsTaskSend({ id: ++wsTaskID, type: "connect" });
      }
    },
    wsTaskSend(data) {
      wsTask.send(JSON.stringify(data));
    },
    startTask() {
      this.wsTaskSend({
        id: ++wsTaskID,
        type: "start",
        payload: {
          cmd: "run",
        },
      });
    },
    addItemXpath(index) {
      console.log(index);
      if (index === this.form.itemsXpath.length - 1) {
        this.form.itemsXpath.push({
          item: "",
          id: ++tmpID,
        });
      } else {
        this.form.itemsXpath.splice(index, 1);
      }
    },
  },
};
</script>
<style lang="scss">
.w50 {
  width: 50%;
  padding: 0 20px;
}
.json-form {
  overflow: auto;
  padding: 20px;
}
.remarks {
  padding: 60px 20px;
}
.control-nav {
  padding: 16px 0;
  &.right {
    text-align: right;
  }
}
.flex-lr-cont {
  display: flex;
  align-items: stretch;
}
.tabs-docker {
  .tab-cont {
    // padding: 20px;
    position: relative;
  }
}
.log-cont {
  padding: 20px;
}
.url-cont {
  .url-item {
    line-height: 30px;
    padding: 0 20px;
  }
}
</style>
